---
title: Caixa de seleção
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Usado quando um usuário precisa selecionar vários valores de várias opções.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props              | Tipo                                     | Descrição                                                                                                                 |
| ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| selecionado        | booleano                                 | Indica se a caixa de seleção está marcada                                                                                 |
| indeterminado      | booleano                                 | Indica se a caixa de seleção está em um estado indeterminado (nem marcada nem desmarcada)              |
| onChange           | função                                   | A função de callback que você deseja acionar quando o estado da caixa de seleção muda                                     |
| aoMudarSelecionado | função                                   | A função de callback que você deseja acionar quando o estado `selecionado` muda                                           |
| variante           | Nome opcional para estilização adicional | O estilo visual variante da caixa. As opções incluem: `primary`, `secondary` e `tertiary` |
| tamanho            | Nome opcional para estilização adicional | O tamanho da caixa de seleção. Tem duas opções: `small` e `large`                         |
| forma              | Nome opcional para estilização adicional | A forma da caixa de seleção. Tem duas opções: `squared` e `rounded`                       |

</Tab>
</Tabs>
